import React, { useEffect, useState } from 'react';
import styles from './index.module.less';
import { DatePicker, Icon } from 'antd';
import classnames from 'classnames';
import type { DatePickerProps } from 'antd/lib/date-picker/interface';

type DatePickerPropsOmit = Omit<DatePickerProps, 'value' | 'defaultValue' | 'onChange'>;

type TValueAndNa =
    | {
          date: moment.Moment | null;
          isNA: boolean;
      }
    | null
    | undefined;

interface IProps extends DatePickerPropsOmit {
    value?: TValueAndNa;
    defaultValue?: TValueAndNa;
    onChange?: (date: TValueAndNa, dateString: string) => void;
}

const Index = ({ value, defaultValue, onChange, ...otherProps }: IProps) => {
    const [valueDeal, setValueDeal] = useState<TValueAndNa>({
        date: null,
        isNA: false,
    });

    useEffect(() => {
        setValueDeal(value);
    }, [value]);

    const selectNaHandler = () => {
        setValueDeal({
            date: null,
            isNA: true,
        });
        onChange?.(
            {
                date: null,
                isNA: true,
            },
            ''
        );
    };

    const onChangeHandler = (date: moment.Moment | null, dateString: string) => {
        onChange?.(
            {
                date,
                isNA: false,
            },
            dateString
        );
        setValueDeal({
            date,
            isNA: false,
        });
    };

    return (
        <span
            className={classnames({
                [styles.parentDatePicker]: true,
                [styles.naActDatePicker]: valueDeal?.isNA,
            })}
        >
            <DatePicker
                value={valueDeal?.date || undefined}
                {...otherProps}
                placeholder={valueDeal?.isNA ? 'NA' : otherProps?.placeholder || '请选择日期'}
                onChange={onChangeHandler}
                renderExtraFooter={() => (
                    <>
                        <span
                            onClick={selectNaHandler}
                            className={classnames({
                                [styles.datePickerNa]: true,
                                [styles.naAct]: valueDeal?.isNA,
                            })}
                        >
                            NA
                        </span>
                    </>
                )}
            />
            {/* @ts-ignore */}
            <Icon
                className={classnames({
                    [styles.pickerClearIconBase]: true,
                    [styles.pickerClearIcon]: valueDeal?.isNA,
                })}
                type="close-circle"
                theme="filled"
                onClick={() => {
                    {
                        /* @ts-ignore */
                    }
                    setValueDeal({
                        date: null,
                        isNA: false,
                    });
                    {
                        /* @ts-ignore */
                    }
                    onChange?.(
                        {
                            date: null,
                            isNA: false,
                        },
                        ''
                    );
                }}
            />
        </span>
    );
};

export default Index;
